<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/prop-types.js"></script>
  <script src="../js/babel.min.js"></script>

  <script type="text/babel">
    /*
      1 初始化阶段：由ReactDOM.render() 触发 初次渲染
        1. constructor()
        2. componentWillMount()
        3. render()
        4. componentDidMount()
      2 更新阶段: 由组件内部this.setState() 或父组件重新 render触发
        1. shouldComponentUpdate()
        2. componentWillUpdate()
        3. render()
        4. componentDidUpdate()

      3 卸载组件: 有ReactDom.unmountComponentAtNode() 触发
        1. componentWillUnmount()
    */
    
    class Count extends React.Component {
      // 构造器
      constructor(props) {
        console.log("Count - constructor");
        super(props)
        this.state = {
          count: 0
        }
      }
      add = () => {
        let { count } = this.state
        this.setState({ count: count += 1 })
      }
      death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById("app"))
      }
      fouce = () => {
        this.forceUpdate()
      }
      // 组件将要挂载之前的钩子
      componentWillMount() {
        console.log("Count - componentWillMount");
      }
      // 组件挂载完成调用
      componentDidMount() {
        console.log("Count - componentDidMount");
      }
      // 组件是否应该被更新 阀门 不写方法默认为true
      shouldComponentUpdate() {
        console.log("Count - shouldComponentUpdate");
        return true
      }
      // 组件将要更新
      componentWillUpdate() {
        console.log("Count - componentWillUpdate");
      }
      // 组件更新完成
      componentDidUpdate() {
        console.log("Count - componentDidUpdate");
      }
      // 组件将要卸载
      componentWillUnmount() {
        console.log("Count - componentWillUnmount");
      }
      // 组件初始化 状态改变调用
      render() {
        console.log("Count - render");
        const { count } = this.state
        return (
          <div>
            <h2>当前求和为:{count}</h2>
            <button onClick={this.add}>点我+1</button>
            <button onClick={this.fouce}>不更改组件状态强制更新</button>
            <button onClick={this.death}>卸载组件</button>
          </div>
        )
      }
    }

    class A extends React.Component {

      state = {
        carName:"奔驰"
      }
      changeCar = ()=>{
        const { carName } = this.state
        this.setState({
          carName:"宝马"
        })
      }

      render() {
        return (
          <div>
            <h2>A父组件</h2>
            <button onClick={this.changeCar}>换车</button>
            <B carName={this.state.carName}/>
            
          </div>
        )
      }
    }

    class B extends React.Component {

      // 组件将要接受新的 props的 钩子
      componentWillReceiveProps(props) {
        console.log(props);
        console.log("b --- componentWillReceiveProps");
      }
      // 阀门是否允许更新
      shouldComponentUpdate() {
        console.log("b ---- shouldComponentUpdate");
        return true
      }
      // 组件将要更新
      componentWillUpdate() {
        console.log("b ---- componentWillUpdate");
      }
      // 组件更新完成
      componentDidUpdate() {
        console.log("b ---- componentDidUpdate");
      }

      // 挂载完成 一次
      componentDidMount() {
        console.log("b --- componentDidMount");
      }
      // 初始化和更新
      render() {
        console.log("b --- render");
        return (
          <div>
            <hr/>
            <h2>B子组件</h2>
            <div>接受到的车是{this.props.carName}</div>
          </div>
        )
      }
    }

    ReactDOM.render(<A />, document.getElementById("app"))


  </script>
</body>

</html>